<!-- 教师管理 -->
<template>
  <div>
    <div class="btns">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="addUser">新增教师</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formData.name" style="width: 240px" placeholder="请输入教师姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formData.department" style="width: 240px" placeholder="请输入部门" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.status" clearable placeholder="请选择教师状态">
            <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" :index="indexMethod()" width="50">
      </el-table-column>
      <!-- <el-table-column prop="teacher_id" label="教师id">
      </el-table-column> -->
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column label="照片">
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
      </el-table-column>
      <el-table-column prop="department" label="部门">
      </el-table-column>
      <el-table-column prop="email" label="邮箱">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="hire_date" label="入职时间">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 'active'">正常</el-tag>
          <el-tag type="success" v-else-if="scope.row.status === 'retired'">退休</el-tag>
          <el-tag type="danger" v-else>离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row)">
            <el-button type="danger" size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑的弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm">
        <el-form-item label="教师编号" :label-width="formLabelWidth" required>
          <el-input v-model="dialogForm.teacher_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="教师姓名" :label-width="formLabelWidth" required>
          <el-input v-model="dialogForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" required>
          <el-select v-model="dialogForm.gender" clearable placeholder="请选择教师性别">
            <el-option v-for="item in genderList" :key="item.id" :label="item.value" :value="item.gender">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生时间" :label-width="formLabelWidth" required>
          <el-date-picker v-model="dialogForm.birth_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" required>
          <el-input v-model="dialogForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" required>
          <el-input type="email" v-model="dialogForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth" required>
          <el-input v-model="dialogForm.department" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职称" :label-width="formLabelWidth" required>
          <el-select v-model="dialogForm.title" clearable placeholder="请选择教师职称">
            <el-option v-for="item in titleList" :key="item.id" :label="item.value" :value="item.title">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" required>
          <el-select v-model="dialogForm.status" clearable placeholder="请选择教师状态">
            <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="formLabelWidth" required>
          <el-date-picker v-model="dialogForm.hire_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="教师照片" :label-width="formLabelWidth" required>
          <el-upload class="avatar-uploader" action="#" :auto-upload="false" :multiple="false" :show-file-list="false"
            :on-change="uploadImage">
            <img v-if="dialogForm.image" :src="dialogForm.pimage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEditUser">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="paginationData.page" :page-sizes="[10, 20, 30, 40]" :page-size="paginationData.page_size"
      layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total">
    </el-pagination>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { get, post, Delete, put } from '@/utils/request.js'
export default {
  data() {
    return {
      tableData: [],
      formData: {
        name: '',
        department: '',
        status: ''
      },
      statusList: [
        { id: 1, value: '正常', status: 'active' },
        { id: 2, value: '退休', status: 'retired' },
        { id: 3, value: '离职', status: 'resigned' },
      ],
      genderList: [
        { id: 1, value: '男', gender: 'male' },
        { id: 2, value: '女', gender: 'female' },
      ],
      titleList: [
        { id: 1, value: '讲师', title: 'lecturer' },
        { id: 2, value: '副教授', title: 'associate_professor' },
        { id: 3, value: '教授', title: 'professor' }
      ],
      paginationData: {
        page: 1,
        page_size: 10,
        total: 0
      },
      dialogForm: {
        teacher_id: '',
        name: '',
        gender: '',
        hire_date: '', //雇佣时间
        phone: '', //电话
        department: '', //部门
        title: '', //职称 
        status: '', //状态
        image: '', //头像
        birth_date:'', //出生日期
        email:'',//邮箱
        pimage:'' //预览图片
      },
      // rules: {
      //   teacher_id:[{ required: true, message: '请输入教师编号', trigger: 'change' }],
      //   name: [{ required: true, message: '请输入教师姓名', trigger: 'blur' }],
      //   gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
      //   hire_date: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
      //   phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
      //   department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
      //   title: [{ required: true, message: '请输入职称', trigger: 'blur' }],
      //   image: [{ required: true, message: '请上传教师照片', trigger: 'blur' }],
      // },
      dialogTitle: '新增教师',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      userRoles: [
        { id: 1, status: '管理员', value: 'admin' },
        { id: 2, status: '普通用户', value: 'user' },
      ]
    }
  },
  methods: {
    //计算序号
    indexMethod() {
      let temp = this.paginationData.page_size * (this.paginationData.page - 1)
      return temp + 1
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogTitle = '编辑教师'
      this.dialogFormVisible = true
      this.dialogForm = row
    },
    handleDelete(row) {
      Delete('http://113.44.61.177:8753/face/teachers/' + row.teacher_id + '/').then(res => {
        // console.log(res);
        this.getData()
        Message.success(res.message)
      }).catch(err => {
        console.log(err);
      })
    },
    //获取教师列表
    getData() {
      get(`http://113.44.61.177:8753/face/teachers/?page_size=${this.paginationData.page_size}&page=${this.paginationData.page}`, this.formData).then(res => {
        // console.log(res);
        this.tableData = res.data
        this.paginationData.total = res.pagination.total
      })
    },
    addUser() {
      console.log('新增用户');
      this.dialogFormVisible = true
      this.dialogTitle = '新增教师'
    },
    // 
    addOrEditUser() {
      const formData = new FormData()
      for (const key in this.dialogForm) {
        if(key !== 'pimage'){
          formData.append(key, this.dialogForm[key])
        }
      }
      if (this.dialogTitle == '新增教师') {
        post('http://113.44.61.177:8753/face/teachers/', formData).then(res => {
          Message.success('新增成功')
          this.getData()
          this.dialogFormVisible = false
        })
      } else {
        put('http://113.44.61.177:8753/face/teachers/' + this.dialogForm.teacher_id + '/', formData).then(res => {
          Message.success('编辑成功')
          this.getData()
          this.dialogFormVisible = false
        })
      }
    },
    handleSizeChange(val) {
      this.paginationData.page_size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.paginationData.page = val
      this.getData()
    },
    // 上传头像
    uploadImage(item) {
      this.dialogForm.pimage = URL.createObjectURL(item.raw)
      this.dialogForm.image = item.raw
    }
  },
  created() {
    this.getData()
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}</style>